import React, { Component } from 'react';
import { Collapse, Upload, Modal } from 'antd';
import { connect } from 'dva';
import styles from '@/pages/Detail.less';
import router from 'umi/router';
import classNames from 'classnames';
import { queryFileList, formatPrice } from '@/utils/common';
import DetailsList from '@/components/DetailsList';
import { formatCodeVal } from '@/pages/Common/common';

const Panel = Collapse.Panel;

@connect(({ tire, loading, common }) => ({
  tire,
  loading: loading.models.tire,
  dictObject: common.dictObject,
}))
export default class TireDetail extends Component {
  constructor(props) {
    super(props);
    this.state = {
      activeKey: ['1', '2'],
      fileList: [],
      id: 0,
    };
    this.paneSize = [1];
  }

  componentWillReceiveProps(nextProps) {
    const { id, dispatch } = nextProps;
    if (this.props.id !== id) {
      this.setState({ id });
      this.queryFileList(id);
    }
  }

  componentDidMount() {
    const {
      tire: { detail },
      id,
      fileList,
    } = this.props;
    if (id) {
      this.queryFileList(id);
      this.setState({ id });
    }
    //字典查询：
    //币种：
    // this.props.dispatch({
    //   type: 'common/querytDictByCode',
    //   payload: { code: 'currency-type' },
    // });
    //轮胎位置：
    this.props.dispatch({
      type: 'common/querytDictByCode',
      payload: { code: 'TIRE_SITE' },
    });
  }

  callback = key => {
    this.setState({
      activeKey: key,
    });
  };

  queryFileList = id => {
    queryFileList({
      props: this.props,
      params: { bizId: id, fileBizType: 'TIRE_MANA' },
      callback: data => {
        if (!data) return;
        this.setState({ fileList: data });
      },
    });
  };

  render() {
    const {
      list,
      type,
      isMobile,
      tire: { detail },
      dictObject,
    } = this.props;

    const { id, activeKey, previewVisible, previewImage, fileList } = this.state;
    const panel = detail[id];
    const tireSite = panel ? formatCodeVal(dictObject['TIRE_SITE'], panel.tireSite) : '';
    const feeCost = panel ? formatPrice(panel.feeCost) : '';

    const fields = [
      { key: 'tireNo', name: '单据号码' },
      { key: 'cartPlateNo', name: '车牌号' },
      { key: 'ownCompanyName', name: '所属公司' },
      { key: 'code', name: '轮胎编号' },
      { key: 'tireBrand', name: '轮胎品牌' },
      { key: 'tireModel', name: '轮胎型号' },
      { key: tireSite, name: '轮胎位置', isConst: true },
      { key: 'tireSiteSort', name: '位置顺序' },
      { key: 'usePerson', name: '更换人' },
      { key: 'useLocation', name: '跟换地' },
      { key: 'changeTime', name: '更换日期' },
      { key: 'usePeriod', name: '轮胎使用期限' },
      { key: 'mileageLimit', name: '轮胎里程上限' },
      { key: feeCost, name: '费用', isConst: true },
      // { key: '单价', name: '单价' },
      { key: 'remarks', name: '备注', isRow: true },
      { key: 'attachments', name: '票据', isRow: true, isFile: fileList },
    ];

    return (
      <div className={styles.CollapseDetails}>
        <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
          <img alt="example" style={{ width: '100%' }} src={previewImage} />
        </Modal>
        <Collapse
          activeKey={this.state.activeKey}
          onChange={key => this.callback(key)}
          bordered={false}
        >
          {this.paneSize.map((item, panelId) => {
            return (
              <Panel
                header={`${panelId === 0 ? '基础信息' : '明细'}`}
                key={`${panelId + 1}`}
                className={styles.customPanelStyle}
                extra={false}
              >
                {panelId === 0 && (
                  <DetailsList
                    isMobile={isMobile}
                    detilsData={{
                      fields: fields,
                      value: panel,
                      fileList: fileList,
                    }}
                  />
                )}
              </Panel>
            );
          })}
        </Collapse>
      </div>
    );
  }
}
